import React, { useState, useEffect, useCallback } from 'react'
import { useNavigate } from 'react-router-dom';
import { Toast, NavBar } from 'react-vant';
import { PullRefresh, List, Tabs, Cell } from 'react-vant'
import axios from '../../utils/index'
import style from './index.module.css'
const Index: React.FC = () => {
    const navigate = useNavigate()
    const [tabList, setTabList] = useState([]);
    const [tabIndex, setTabIndex] = useState(0);
    const aaa = async () => {
        const res = await axios.get('/api/neitab')
        if (res.data.code == 200) {
            setTabList(res.data.neitab)
            console.log(res.data.neitab);
        }
    }

    const change = (index: number) => {
        setTabIndex(index);
    };
    useEffect(() => {
        aaa()
    }, [])

    const onLoad = useCallback(async () => {
        const res = await axios.get('/api/neitab');
        setTimeout(() => {
            if (res.data.code === 200) {
                setTabList([...tabList, ...res.data.tabList]);
            }
        }, 1000)
    }, [tabList]);
    return (
        <div>
            <NavBar
                title="内科"
                onClickLeft={() => navigate(-1)}
            />
            <img src="../src/assets/110.png" alt="" style={{ width: '100%' }} />

<<<<<<< HEAD

            <div className="zys">
                <div className="zysbutton">
                    <div className="zysbutton-top">
                        {tabList.length > 0 &&
                            tabList.map((item, index) => (
                                <div
                                    className={index == tabIndex ? "active" : ""}
                                    onClick={() => change(index)}
                                >
                                    {item.title}
                                </div>
                            ))}
                    </div>
                    <div className="zysbutton-button">
=======
            <div className="zysbutton">
                <div className={style.zysbuttontop}>
                    {tabList.length > 0 &&
                        tabList.map((item, index) => (
                            <div
                                className={index == tabIndex ? "active" : ""}
                                onClick={() => change(index)}
                            >
                                {item.title}
                            </div>
                        ))}
                </div>
                <div className="zysbutton-button">
>>>>>>> d950f17478bca1e8c439c42821ccd853b9b56ef3
                    <List onLoad={onLoad} finishedText="没有更多了">
                        {tabList.length > 0 &&
                            tabList[tabIndex].children.map((item, index) => (
                                <div>
                                    <div>
                                        <dl>
                                            <dt>
                                                <img src={item.img} />
                                            </dt>
                                            <dd>
                                                <dd><b>{item.name}</b> {item.zhu}</dd>
                                                <dd>
                                                    <span style={{ fontSize: '14px', color: '#000' }}>{item.yuan}</span>
                                                </dd>
                                                <dd>擅长:{item.shen}</dd>
                                                <dd>
                                                    咨询： <span style={{ color: 'orange', fontSize: '14px' }}>{item.zi}人</span> 评分: <span style={{ color: 'orange', fontSize: '14px' }}>{item.ping}分</span>
                                                    <button className={style.btn}>立即咨询</button>
                                                </dd>
                                            </dd>
                                        </dl>
                                    </div>
                                </div>
                            ))}
                    </List>
                </div>
                </div>
            </div>



        </div>
    )
}

export default Index
